<template>
  <div class="my-dropdown">
    <My-Tooltip
      :trigger="trigger"
      :placement="placement"
      :close-delay="closeDelay"
      :open-delay="openDelay"
      :manual="manual"
      ref="tooltipRef"
      @visible-change="visibleChangeHandler"
    >
      <template #content>
        <ul class="my-dropdown__menu">
          <template v-for="item in menuOptions" :key="item.key" >
            <li v-if="item.divided" class="divided-placeholder"></li>
            <li
              class="my-dropdown__item"
              @click="handleClickItem(item)"
              :class="{'is-disabled': item.disabled}"
              :id="`dropdown-item-${item.key}`"
            >
              <RenderVnode :v-node="item.label" />
            </li>
          </template>
        </ul>
      </template>
      <slot />
    </My-Tooltip>
  </div>
</template>

<script setup name="MyDropdown">
import propObj from './props';
import RenderVnode from '../Common/RenderVnode'
import { ref } from 'vue'
defineOptions({
  name: 'MyDropdown'
})
const emit = defineEmits(['visible-change', 'select'])
const props = defineProps(propObj);
const tooltipRef = ref(null)
const handleClickItem = (item) => {
  if (item.disabled) return
  emit('select', item)
  if (props.hideAfterClick) {
    hide()
  }
}
const show = () => {
  tooltipRef.value?.show()
}
const hide = () => {
  tooltipRef.value?.hide()
}
const visibleChangeHandler = (val) => {
  emit('visible-change', val)
}
defineExpose({
  show,
  hide
})
</script>

<style lang="scss" scoped>

</style>
